<template>
	<view class="index">
		<custom id='head' titleColor='#181818' navBackgroundColor='#FFFFFF' :style="{height:cusHeight+'px'}" textContent='人脸抓拍'></custom>
		 <view class="main-container" :style="{height:heightc+'px'}">
			<scroll-view  @scrolltolower="scrollLower" @refresherrefresh="onRefresh" style="height: 100%;"
				 scroll-y>
				<captureInfor :info="testInfo" v-for="i in 50"/>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import captureInfor from '../../common/capture.vue'
	import {
		getImage,
		getName,
		systemInfo
	} from '@/utils/index.js';
	import custom from '../../colorui/commonpent/custom.vue'
	import { MQTT_OPTIONS ,	MQTT_IP} from '../../utils/mqttConfig.js'
	export default {
		data() {
			return {
				title: 'Hello',
				data: 0,
				heightc: 0,

				triggered: false,
				client:null,
				switches:'admin_id',
				testInfo:{
					id:0,
					img:'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
					title:'张三丰',
					address:'1号通道入口',
					time:'2023-5-25 17:15:55',
					
					typeBgColor:'99'
				},
			}
		},
		components: {
			custom,
			captureInfor
		},
		onReady() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					//_this.phoneHeight = res.windowHeight;
					//console.log("phoneHeight:" + res.windowHeight)
					let view = uni.createSelectorQuery().select("#head"); //局部滑块
					view.boundingClientRect(data => {
						//return res.windowHeight - data.height
						that.heightc = res.windowHeight - data.height - 20;
					}).exec();
				},
			});
		},
		onShow() {
			
		},
		computed: {
			cusHeight() {
				//console.log('sdfasd', this.CustomBar);
				//console.log('sdfasd', (uni.upx2px(this.CustomBar) / this.CustomBar) + 220);
				let height = this.CustomBar / (uni.upx2px(this.CustomBar) / this.CustomBar) + 220;
				//console.log('sdfasd', height);
				return this.CustomBar;
			}
		},

		async onLoad() {
			const data = await this.$api.getBanner();
			this.data = data.code
			
			setTimeout(() => {
			
				console.log('lunbo', data)
			},5000)
		},
		//下拉刷新
		onPullDownRefresh() {
			this.triggered = true;
			setTimeout(() => {
				uni.stopPullDownRefresh();
				console.log('下拉刷新');
				this.triggered = false;
			},5000)
		},
		//上拉加载
		onReachBottom() {
			this.triggered = true;
			console.log('上拉刷新');
		},
		
		methods: {
			scrollLower(){
				console.log('上拉刷新');
			},
			onRefresh() {
				console.log('下拉刷新');
			},
			connect() {
			   	var that = this
			    //h5的连接是 'ws://' + url。
			   	// #ifdef H5 
			   	that.client = this.$mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
			   	// #endif 
			    //app的连接是 'wx://' + url。
			   	//#ifdef MP-WEIXIN||APP-PLUS
			   	that.client = this.$mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
			   	// #endif
			   	that.client.on('connect', function() {
			   		console.log('连接成功',that.client)
			        //that.switches 这是订阅主题名称 和接口地址差不多，是他们定义的，直接拿过来用就行，订阅成功后，就可以接收这个的信息了
			   		that.client.subscribe(that.switches, function(err) {
			   			if (!err) {
			   				console.log('switches订阅成功')
			   			}
			   		});

			   	}).on('reconnect', function(error) {
			   		console.log('正在重连...', that.switches)
			   	}).on('error', function(error) {
			   		console.log('连接失败...', error)
			   	}).on('end', function() {
			   		console.log('连接断开')
			   	}).on('message', function(topic, message) {
					console.log('message');
					console.log(topic, message);
			                       // 统一接受信息。 topic 是订阅的主题名称，message是监听信息的接收和发送都能接收
			   		
			   	})
			   }
		
		}
	}
</script>

<style lang="scss" scoped>
	.index{
	
		height: 100%;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #F9F8FA;
		z-index: -1;
		height: 100%;
		
		.main-container {
			position: relative;
			margin: 10px 40rpx;
			.item-box{
				display: flex;
				padding: 16rpx 0;
				align-items: center;
				position: relative;
				.headimg{
					width: 120rpx;
					height: 120rpx;
					margin: 10rpx;
					
					image{
						width: 100%;
						height: 100%;
					}
				}
				.label{
					position: absolute;
					right: 0rpx;
					top: 10rpx;
				}
				.info{
					color: #c1c0be;
					.info-name{
						color: #737272;
						margin-bottom: 12rpx;
					}
				}
				
			}
		}

		
	}
	/deep/ ::-webkit-scrollbar {
		//隐藏scroll-view里面自带的滚动条
		display: block; //必加
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: auto!important;
		background:transparent;
		overflow: auto!important;
		}
	
</style>